<template>
	<view class="yp" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
		<view class="pullRefresh" ref="pullRefresh" :class="isEnd ? 'transition-Zero5' : ''" :style="{ marginTop: marginTop + 'px' }">
			<view class="text-center flex ali-end just-cent pb40" style="height: 100px;">
				<text class="cuIcon-icloading mr20 fo-40" :class="loadText === '加载中...' ? 'animation-rotate' : ''"></text>
				<text class="fo-gray fo-32">{{ loadText }}</text>
			</view>
			
			
			
			<!-- 放进去的数据部分 -->
			<view class="padd30 bg-SkyBlue" v-for="(i, j) in 50" :key='j'>数据栏目:{{ j }}</view>
		</view>
	</view>
</template>

<script>
let StartScrollX,
	StartScrollY,
	MoveScrollY,
	timer,
	X_OR_Y_MOVE = null; // 判断是上下滑还是左右滑
export default {
	name: '',
	data() {
		return {
			CurrentTopPositon: 0,
			loadText: '下拉刷新',
			marginTop: -100,
			isEnd: false
		};
	},
	methods: {
		
		// 获取节点的信息
		panduan() {
			let views = uni.createSelectorQuery().select('.pullRefresh');
			views
				.boundingClientRect(data => {
					// console.log(data.top)
					this.CurrentTopPositon = data.top;
				})
				.exec();
		},
		/*下拉刷新  封装************************************************************************************************/
		touchstart(e) {
			if (X_OR_Y_MOVE === '左右滑动') return;
			StartScrollX = e.touches[0].clientX;
			StartScrollY = e.touches[0].clientY;
			
			this.isEnd = false;
		},
		touchmove(e) {
			if (X_OR_Y_MOVE === '左右滑动') return;
			let slideX_distance = e.touches[0].clientX - StartScrollX;
			let slideY_distance = e.touches[0].clientY - StartScrollY;
			Math.abs(slideY_distance) > Math.abs(slideX_distance) ? (X_OR_Y_MOVE = '上下滑动') : (X_OR_Y_MOVE = '左右滑动');
			this.panduan(MoveScrollY);
			MoveScrollY = e.touches[0].clientY - StartScrollY;
			if (this.CurrentTopPositon >= -100 && MoveScrollY > 0) {
				this.loadText = '下拉刷新';
				// 阻尼系数0.5
				this.marginTop = -100 + MoveScrollY * 0.3;
				if (MoveScrollY > 180) {
					this.loadText = '释放刷新';
				}
			}
			
			
			
			/*
				此100 是这个加入下拉刷新页面距离顶部的距离
			*/
		},
		touchend(e) {
			// 下拉强度是180
			if (this.CurrentTopPositon >= -97 && MoveScrollY > 180) {
				this.loadText = '加载中...';
				if (timer) return;
				let timer = setTimeout(() => {
					this.isEnd = true;
					this.loadText = '刷新成功~';
					this.$pub.Toast('刷新成功~')
					console.log('%c刷新成功', 'color:red');
				
					this.marginTop = -100;
					clearTimeout(timer);
				}, 2000);
			} else {
				this.isEnd = true;
				this.marginTop = -100;
			}
			
			X_OR_Y_MOVE = null;
			StartScrollX = null;
			StartScrollY = null;
			MoveScrollY = null;
		},
		// 刷新成功~
		FreshOk() {
			this.isEnd = true;
			this.loadText = '刷新成功~';
			console.log('%c刷新成功', 'color:red');

			this.marginTop = -100;
		}
	}
};
</script>

<style></style>
